<template>
	<div class="container">
		<!-- 主导航栏 -->
		<!-- <ul class="main-tabs clearfix">
			<li v-for="(item,index) in mainTabs.data" :key="index" :class="{active:index==mainTabs.index}"
				@click="mainTabSwitch(index)">{{item.title}}</li>
		</ul> -->

		<h3 class="header-title clearfix">
			<span class="border"></span>
			<p>{{ headerTitle }}</p>
			<span class="addUser" @click="opneAddUser">+新增</span>
		</h3>
		<comNavTabs :navList="navList" @switch="tabSwitch"></comNavTabs>
		<!-- <comSearch   :options="searchData" @search="searchList"></comSearch> -->
		<el-form :model="form" :inline="true">

			<el-form-item label="姓名">
				<el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
			</el-form-item>

			<el-form-item label="手机号码">
				<el-input v-model="form.telnum" placeholder="请输入手机号码"></el-input>
			</el-form-item>


			<el-form-item label="日期" v-show="navList.index == 0">
				<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>~
				<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>

			<el-form-item label="员工属性" v-show="navList.index == 0">
				<el-select v-model="type" filterable placeholder="请选择">
					<el-option label="全部" value='4'>
					</el-option>
					<el-option label="全职" value="1">
					</el-option>
					<el-option label="兼职" value="2">
					</el-option>
					<el-option label="实习生" value="3">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item style="width:400px;text-align:center;">
				<el-button type="primary" @click="search" size="small" class="searchBtn">查询</el-button>
				<el-button type="primary" @click="linkout" v-show="form.startDate && form.endDate" size="small"
					class="searchBtn">导出</el-button>
				<el-button v-show="!form.startDate || !form.endDate" style="background-color: RGBA(160, 160, 160, 1); color: white;"
					size="small" class="searchBtn">导出</el-button>
				   <!-- <el-link :href='linkurl' @click="linkout">导出数据</el-link> -->
			</el-form-item>
		</el-form>

		<comTable :options="tableList" v-loading="loading" @changeradio="function (data) { changeradio(data) }"
			@cancel="function (data) { cancel(data) }" @lookcompany="function (data) { lookcompany(data) }"
			@reset="function (data) { reset(data) }">


		</comTable>
		<div>

			<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page.sync="cur"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum" background></el-pagination>

		</div>

		<el-dialog :visible.sync="showDialog" width="660px" height="309px" class="evalDialog">

			<div class="dialogForm">
				<h2>新增录用专员</h2>
				<el-form :model="form" :inline="true">
					<el-form-item label="姓名" label-width="100px">
						<el-input v-model="addname" placeholder="请输入姓名" style="width: 320px; height: 48px;">
						</el-input>
					</el-form-item>
					<el-form-item label="手机号码" label-width="100px">
						<el-input v-model="addtel" placeholder="请输入手机号码" style="width: 320px; height: 48px;">
						</el-input>
					</el-form-item>
					<el-form-item label="账号" label-width="100px">
						<el-input v-model="addaccount" placeholder="请输入账号" style="width: 320px; height: 48px;">
						</el-input>
					</el-form-item>
					<el-form-item label-width="100px">
						<p class="remend">
							账号密码为admin@123,请联系工作人员登录并修改
						</p>
						<el-button type="primary" style="margin-left: 203px;" @click="submitAdd">确定</el-button>
					</el-form-item>
				</el-form>

			</div>
		</el-dialog>

		<el-dialog :visible.sync="showrmind" width="380px" height="220px" class="evalDialog">

			<h3 style="text-align: center; font-size: 20px; padding-top: 30px; margin-bottom: 30px;">提示</h3>
			<div style="width: 280px; height: 160px; margin: 0 auto;">
				<p style="font-size: 20px;">
					是否确认注销该录入专员账号？
				</p>
				<el-button type="primary" @click="cancelsubmite()" style="width: 78px;
	    text-align: center;
	    margin-left: 101px;
	    margin-top: 30px;">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	components: {
		comNavTabs: () => import("@/household/common/comNavTabs.vue"),
		comSearch: () => import("@/component/common/comSearch.vue"),
		// 	comImport: () => import("@/component/common/comImport.vue"),
		comTable: () => import("@/household/common/comTable.vue"),
		// 	flexDemand: () => import("@/component/flexible/flexDemand.vue"),
		// 	flexManualEntry: () => import("@/component/flexible/flexManualEntry.vue"),
		// 	flexRegisterMsg: () => import("@/component/flexible/flexRegisterMsg.vue"),
		// 	flexUnsuccessful: () => import("@/component/flexible/flexUnsuccessful.vue"),
		// 	flexUpload: () => import("@/component/flexible/flexUpload.vue"),
		// 	flexCollectAccount: () => import("@/component/flexible/flexCollectAccount.vue"),
		// 	flexImportTemplate: () => import("@/component/flexible/flexImportTemplate.vue"),
	},
	data() {
		return {
			type: '',
			pageSize: 10,
			totalNum: 0,
			cur: 1,
			loading: true,
			linkurl: '',
			showrmind: false,
			addname: '', //新增姓名
			addaccount: '', //新增账号
			addtel: '', //新增的手机号码
			showDialog: false,
			headerTitle: '专员录入管理',
			userid: '',
			navList: {
				index: 0, //当前是在哪个tab栏
				data: [{
					title: '使用中'
				},
				{
					title: '已注销'
				},
				]
			},
			tableList: {

				list: [{
					title: '姓名',
					prop: 'remark2',
					isClick: false
				},
				{
					title: '手机',
					prop: 'remark1',
					isClick: false
				},
				{
					title: '账号',
					prop: 'createTime',
					isClick: false
				},
				{
					title: '企业注册量',
					prop: 'projectName',
					isClick: false
				},
				{
					title: '岗位发布总量',
					prop: 'costStandard',
					isClick: false
				},
				{
					title: '上次登录时间	',
					prop: 'costStandard',
					isClick: false
				},
				],
				noradio: true,
				noOperation: true, //是否有操作项
				radiolist: [
					{
						name: '全职',
						isBtn: false,
						title: 'changeradio'
					},
					{
						name: '兼职',
						isBtn: false,
						title: 'changeradio'
					}
				],
				operation: [ //操作项内容
					{
						name: '操作',
						isBtn: false,
						title: 'openFlexDialog'
					}
				],
				data: [
					/* {
						companyName: '上海天都人力资源有限公司',
						telnum: '15202120781',
						createTime: '2020-10-12',
						projectName: '帮助公司设计官方网站',
						costStandard: '5000元',
					} */
				]
			},
			searchData: {
				noFounder: true, //姓名
				noTime: true, //时间段
				phonenum: true, //手机号码
				searchInfo: {}, //搜索信息
			},

			form: {
				userName: '', //用户姓名
				telnum: '', //电话
				startDate: '', //开始时间
				endDate: '', //截至时间
			}
		}
	},
	created() {
		this.tabSwitch(0);
	},
	methods: {
		pageChange(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			this.cur = p;
			this.tabSwitch(this.navList.index)
		},
		handleSizeChange(val) {
			console.log(val);
			this.pageSize = val;
			this.tabSwitch(this.navList.index)
		},
		changeradio(data) {
			console.log(data);

			let type;
			if (data.radioname == '全职') {
				type = 1
			} else if (data.radioname == '兼职') {
				type = 2
			} else if (data.radioname == '实习生') {
				type = 3
			}
			let params = {
				personnelId: data.personnelId,
				type: type
			}
			this.$ceshiAxios1.post('/v1/common/updateInpustMessage', params).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.tabSwitch(this.navList.index);
					this.$message.success('操作成功')
				} else {
					this.$message.warning(res.data.message)
				}
			})
		},
		cancel(data) {
			this.showrmind = true
			this.data = data
			console.log(this.data);
		},

		lookcompany(data) {
			console.log(data);
			this.linkTo("/home/pgentering", {
				id: data.personnelId,
				userName: data.personName
			});
		},

		download(res) {
			if (!res) {
				return;
			}
			let bob = new Blob([res.data]);
			console.log(res);
			console.log(res.headers["content-disposition"]);
			let fileName = res.headers["content-disposition"].split("=")[1];
			console.log(fileName);
			fileName = decodeURI(fileName);
			let url = window.URL.createObjectURL(bob);
			let link = document.createElement("a");
			link.style.display = "none";
			link.href = url;
			link.setAttribute("download", fileName);
			document.body.appendChild(link);
			link.click();
			this.$message({
				message: "导出成功",
				type: "success"
			});
		},
		linkout() {
			// https://house.fcw-china.com/app/v1/common/outputpersonnel?startdate=2021-12-27&endate=2021-12-27
			this.linkurl = 'https://fcapp.fcw-china.com/app/v1/common/outputpersonnel?startdate=' + this.form.startDate + '&endate=' + this.form.endDate
			// console.log('https://house.fcw-china.com/app/v1/common/outputpersonnel?startdate='+this.form.startDate+'&endate='+this.form.endDate);
			location.href = this.linkurl
			// this.$axios({
			// 		method: "get",
			// 		url: "https://house.fcw-china.com/app/v1/common/outputpersonnel",
			// 		params: {
			// 			startdate: this.form.startDate,
			// 			endate: this.form.endDate
			// 		},
			// 		responseType: "blob"
			// 	})
			// 	.then(res => {
			// 		console.log(res)
			// 		this.download(res);
			// 	})
			// 	.catch(error => {
			// 		console.log(error);
			// 		this.$message({
			// 			message: "导出失败,请重新操作",
			// 			type: "warning"
			// 		});
			// 	});
		},



		cancelsubmite() {
			let params = {
				userid: this.data.personnelId,
				status: 1,
			}
			this.$ceshiGetAxiosys('v1/user/operationlogin', params).then(res => {
				if (res.data.code == 1) {
					this.$message.success('注销成功')
					this.tabSwitch(1);
					this.showrmind = false
				} else {
					this.$message.success(res.data.message)
				}
			})
		},
		reset(data) {
			let params = {
				userid: data.personnelId,
				status: 2,
			}
			this.$ceshiGetAxiosys('v1/user/operationlogin', params).then(res => {
				if (res.data.code == 1) {
					this.$message.success('恢复成功')
					this.tabSwitch(0);
				} else {
					this.$message.success(res.data.message)
				}
			})
		},
		submitAdd() {
			console.log(localStorage.getItem('userinfo'));
			if (!(/^1[3|4|5|7|8|9]\d{9}$/.test(this.addtel))) {
				this.$message.warning('手机号码有误，请重填')
				return false;
			}
			if (this.addname == '') {
				this.$message.warning('请输入姓名')
				return false;
			}

			if (this.addaccount == '') {
				this.$message.warning('请输入账号')
				return false;
			}

			let userLogin = {
				personUploading: this.addaccount,
				personTelnum: this.addtel,
				personName: this.addname,
			}
			let userRole = {}
			this.$ceshiAxios1.post('v1/common/insertinputpersonnel', userLogin).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.$message.success('操作成功')
					this.showDialog = false;
					this.tabSwitch(this.navList.index);
				} else {
					this.$message.warning(res.data.message)
				}
			})




		},
		search() {
			this.tabSwitch(this.navList.index);

		},
		opneAddUser() {
			this.showDialog = true;
		},
		tabSwitch(index) {
			this.navList.index = index;
			let type = this.type
			if (this.type == 4) {
				type = ""
			}


			let params = {
				personName: this.form.userName,
				telnum: this.form.telnum,
				personStatus: 1,
				pagenum: this.cur,
				pagesize: this.pageSize,
				type: type,
				statdate: this.form.startDate,
				enddate: this.form.endDate
			}
			let url = 'v1/user/inputpersonallist';



			if (this.navList.index == 0) {
				this.tableList.list = [{
					title: '姓名',
					prop: 'personName',
					isClick: false
				},
				{
					title: '手机',
					prop: 'personTelnum',
					isClick: false
				},
				{
					title: '账号',
					prop: 'personUploading',
					isClick: false
				},
				{
					title: '企业注册量',
					prop: 'companycount',
					isClick: false
				},
				{
					title: '岗位发布总量',
					prop: 'positioncount',
					isClick: false
				},
				{
					title: '上次登录时间	',
					prop: 'lastLoginTime',
					isClick: false
				},

				]
				this.tableList.radiolist = [
					{
						name: '全职',
						isBtn: true,
						title: 'changeradio'
					},
					{
						name: '兼职',
						isBtn: true,
						title: 'changeradio'
					},
					{
						name: '实习生',
						isBtn: true,
						title: 'changeradio'
					}
				]

				this.tableList.operation = [ //操作项内容
					{
						name: '注销',
						isBtn: false,
						title: 'cancel'
					},
					{
						name: '查看',
						isBtn: false,
						title: 'lookcompany'
					}
				]
			} else {
				params.personStatus = 2
				this.tableList.list = [{
					title: '姓名',
					prop: 'personName',
					isClick: false
				},
				{
					title: '手机',
					prop: 'personTelnum',
					isClick: false
				},
				{
					title: '账号',
					prop: 'personUploading',
					isClick: false
				},
				{
					title: '企业注册量',
					prop: 'companycount',
					isClick: false
				},
				{
					title: '岗位发布总量',
					prop: 'positioncount',
					isClick: false
				},
				{
					title: '上次登录时间	',
					prop: 'lastLoginTime',
					isClick: false
				},


				]
				this.tableList.operation = [ //操作项内容
					{
						name: '恢复',
						isBtn: false,
						title: 'reset'
					}
				]
			}


			if (this.form.startDate != '' && this.form.endDate != '') {
				this.$ceshiGetAxios('/v1/common/selectinputmessage', params).then(res => {
					this.tableList.data = res.data.data.plist
					console.log(res.data.data, 'data');
					this.totalNum = Math.abs(res.data.data.total)
					for (var i in this.tableList.data) {
						if (this.tableList.data[i].type != "") {
							if (this.tableList.data[i].type == 1) {
								this.tableList.data[i].radioname = '全职'
							} else if (this.tableList.data[i].type == 2) {
								this.tableList.data[i].radioname = '兼职'
							} else if (this.tableList.data[i].type == 3) {
								this.tableList.data[i].radioname = '实习生'
							}
							else {
								this.tableList.data[i].radioname = ''
							}
						}
					}
					this.loading = false
				})
			} else {
				this.$ceshiGetAxiosys(url, params).then(res => {
					this.tableList.data = res.data.data.plist
					this.totalNum = Math.abs(res.data.data.total)
					for (var i in this.tableList.data) {
						if (this.tableList.data[i].type != "") {
							if (this.tableList.data[i].type == 1) {
								this.tableList.data[i].radioname = '全职'
							} else if (this.tableList.data[i].type == 2) {
								this.tableList.data[i].radioname = '兼职'
							} else if (this.tableList.data[i].type == 3) {
								this.tableList.data[i].radioname = '实习生'
							}
							else {
								this.tableList.data[i].radioname = ''
							}
						}
					}
					this.loading = false
					console.log(res.data.data, 'data');
				})

			}



		},
		searchList(form) {
			if (form.userName) {
				form.businessmanName = form.userName;
				delete form.userName;
			}
			console.log(form);
			this.searchData.searchInfo = form;
			this.getDataList(this.searchData.searchInfo);
		},
	},

}
</script>

<style scoped="scoped">
.search {
	margin: 20px 0;
}

.el-form-item {
	min-width: 300px;
	float: left;
	margin-right: 20px;
}

.el-form {
	margin-top: 20px;
}

.searchBtn {
	width: 140px;
}

.searchBox {
	padding: 0 30px;
}

.container {
	background-color: #fff;
	height: 100%;
	padding-left: 20px;
}

.main-tabs {
	background-color: #EFF1F8;
	margin-bottom: 20px;
	margin-left: -20px;
	padding-left: 50px;
}

.main-tabs li {
	height: 40px;
	line-height: 40px;
	float: left;
	margin: 10px 20px;
	padding: 0 30px;
	cursor: pointer;
}

.main-tabs .active {
	background: #0064E4;
	border-radius: 20px;
	color: #fff;
}

.addUser {
	cursor: pointer;
}

.dialogForm {
	margin: 0 auto;
	width: 600px;
	height: 300px;
	padding-left: 58px;

}

.remend {
	margin-left: 100px;
	color: red;

}

.dialogForm h2 {
	margin: 23px 167px;
	padding-top: 20px;
}

.dialogForms {
	width: 600px;
	margin: 0 auto;
	height: 400px;
}

.header-title {
	margin-top: 20px;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #D2D2D2;
}

.header-title .border {
	width: 15px;
	height: 30px;
	background-color: #0064E4;
	margin-right: 20px;
	float: left;
}

.header-title p {
	float: left;
	font-weight: bold;
	line-height: 30px;
}

.header-title span {
	display: inline-block;
	float: right;
	font-weight: bold;
	color: #0000FF;
	line-height: 30px;
	margin-right: 20px;
}

.header-title .opt span {
	float: left;
	margin-right: 20px;
	padding: 10px 20px;
	border: 1px solid #000;
	border-radius: 20px;
	cursor: pointer;
}

.pageBox {
	margin-top: 20px;
}
</style>
